<div class="container col-sm-12 context-form-container ">
  <div class="row">
    <div class="col-sm-7 context-form">
      <form class="form-horizontal" role="form" (ngSubmit)="onSubmitSub()" [formGroup]="subContextForm" novalidate>
        <div class="form-group context-form-row">
          <label class="col-sm-3 control-label-left" for="subContextType">Sub ContextType</label>
          <div class="col-sm-9">
            <p-dropdown formControlName="subContextType" [options]="subContextTypes" placeholder="select context type">
            </p-dropdown>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" icon="fa-check" label="Sub Context" pButton [disabled]="subContextForm.pristine"></button>
          </div>
        </div>
      </form>

      <form class="form-horizontal" role="form" (ngSubmit)="onSubmitSend()" [formGroup]="sendContextForm" novalidate>
        <div class="form-group">
          <label for="contextContent" class="col-sm-3 control-label-left">Context Content</label>
          <div class="col-sm-9">
            <p-dropdown class="context-form-row" formControlName="sendContextType" [options]="sendContextTypes" (onChange)="sendContextTypeChanged($event)"
              placeholder="select context type to send">
            </p-dropdown>
            <textarea class="form-control context-form-row context-form-textarea" rows="5" formControlName="sendContextContent" pInputTextarea [(ngModel)]="sendContextContent"></textarea>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" icon="fa-check" label="Send Context" pButton [disabled]="sendContextForm.pristine"></button>
          </div>
        </div>
      </form>
    </div>

    <div class="col-sm-5 context-list">
      <form class="form">
        <label class="col-sm-5 control-label-left" for="receivedContexts">Received Contexts</label>
        <select multiple class="form-control ui-listbox">
            <ng-template ngFor [ngForOf]='receivedContexts' let-context>
              <option>{{context}}</option>
            </ng-template>
          </select>
      </form>
    </div>
  </div>

</div>